<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/mitt/dist/mitt.umd.js"></script>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
    </style>
</head>

<body>
    <!-- 唐玉林209000622 -->
    <div>
        <p>1.form组件与table组件作为兄弟组件,模板root做为根组件</p>
        <p>2.根组件存有数据，根组件在menthds中创建一个函数使用mitt的emit方法创建待监听事件，传出根组件中的users信息，并在生命周期函数mounted中调用该方法</p>
        <p>3.table组件通过mitt的on方法监听根组件发送的users事件，获取users信息</p>
        <p>4.form组件创建addUser()方法在该方法中使用emit()创建待监听事件'addUser',以及所传对象</p>
        <p>5.根组件使用mitt 的 on方法监听'addUser' </p>
        <p>模板userNum是table的子组件 通过2和3来获取users的长度判断用户数据</p>
    </div>
    <div id="app"></div>
    <template id="root">
        <form-componet></form-componet>
        <table-componet></table-componet>
    </template>
    <template id="form">
        <div style="margin: 0 auto; width: 300px;border:1px solid black;">
            <ul style="list-style: none;">
                <li>
                    <label>用户名:</label><input type="text" v-model="name">
                </li>
                <li>
                    <label>邮 箱:</label> <input type="email" v-model="email">
                </li>
                <li>
                    <button @click="addUser">提交</button>
                </li>
            </ul>
        </div>
    </template>
    <template id="table">
        <div style="margin: 0 auto; width: 300px;">
            <table border="1px">
                <tr>
                    <td>用户名:</td>
                    <td>邮 箱:</td>
                </tr>
                <tr v-for="user in users">
                    <td>{{user.name}}</td>
                    <td>{{user.email}}</td>
                </tr>
            </table>
            <user-num-componet></user-num-componet>
        </div>

    </template>

    <template id="userNum">
        <div>
            用户人数{{users.length}}
        </div>
    </template>
    <script>
        const emitter = window.mitt()
        const app = Vue.createApp({
            template: '#root',
            data() {
                return {
                    users: [
                        { id: 1, name: '站三年', email: 'dsfsf@163.com' }
                    ]
                }
            },
            methods: {
                sendToUsers() {
                    emitter.emit("sendUsers", this.users)
                }
            },
            mounted() {
                this.sendToUsers()
                emitter.on("addUser", (user) => {
                    this.users.push(user)
                })

            },
        })
        app.component('formComponet', {
            template: '#form',
            data() {
                return {
                    name: '',
                    email: ''
                }
            },
            methods: {
                addUser() {
                    emitter.emit('addUser', { id: new Date().getTime(), name: this.name, email: this.email })
                }
            },
        })
        app.component('tableComponet', {
            template: '#table',
            data() {
                return {
                    users: []
                }
            },
            mounted() {
                emitter.on('sendUsers', (users) => {
                    this.users = users
                })
            },
        })
        app.component('userNumComponet', {
            template: '#userNum',
            data() {
                return {
                    users: []
                }
            },
            mounted() {
                emitter.on('sendUsers', (users) => {
                    this.users = users
                })
            },
        })
        app.mount("#app")
    </script>

</body>

</html>